<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格布局</title>
    <style>
        body{
        }
        .container{
            margin: 40px;
            background-color: burlywood;
            /* height: 500px; */
            display: grid;
            grid-template-columns: repeat(auto-fill,minmax(80px,1fr));  /*auto-fill尽可能多的排出列,  auto-fit刚好合适的去排出列*/
            grid-template-rows: repeat(1, 40px);
            justify-content: center;
            align-content: center; 
            grid-auto-rows: minmax(20px,auto);
        }
        .item{
            width: 40px;  border: 1px solid #000;
        }
    </style>
</head>
<body>
    整个网格的布局 justify-content: 横向布局, align-content: 纵向布局,<br/>
    每个item的布局  justify-items,  align-items<br/>
    显式网格  grid-template-columns    grid-template-rows  定义的<br/>
    隐式网格调整宽高  grid-auto-columns    grid-auto-rows  定义的<br/>
    隐式网格是列不变, 行增加排列,  grid-auto-flow : column;  修改后行不变,列增加;   grid-auto-flow: dense;  紧凑排列(会填充留空的地方)
    order: 指定排列顺序    .item:last-child{ order: -1 }  把最后一个元素放到第一个
    下面效果,动态列, 动态行
    <div class="container type1">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">16</div>
        <div class="item">16</div>
        <div class="item">16</div>
        <div class="item">16</div>
        <div class="item">16</div>
        <div class="item">16</div>
        <div class="item">16</div>
        <div class="item">16</div>
        <div class="item">16</div>
        <div class="item">16</div>
        <div class="item">16</div>
        <div class="item">16</div>
        <div class="item">16</div>
        <div class="item">16</div>
        <div class="item">16</div>
        <div class="item">16</div>
        <div class="item">16</div>
        <div class="item">16</div>
        <div class="item">长筒袜高蛋白芳草碧连天</div>
    </div>
</body>
</html>